<template>
  <div class="yxp-wrap">
    <router-view></router-view>
    <translateModal></translateModal>
    <!-- <audio ref="audio" id="reverse-audio"></audio> -->
  </div>
</template>
<script>
import translateModal from "@/components/common/translateModal";
import { mapState } from "vuex";
export default {
  components: {
    translateModal
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      src: (state) => state.reverseAudioSrc,
    }),
  },
  watch: {
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="less">
img {
  width: 100%;
  height: auto;
}
.yxp-wrap {
  display: flex;
  width: 100%;
  height: 100%;
  background:url(../../assets/yxp-bg.png);
  background-size: 1620px 817px;
  background-repeat: no-repeat;
  background-position: center center;
}
.flex-center {
    justify-content: center;
  }
  .flex {
    justify-content: space-between;
  }
@media screen and (max-width: 1200px) {
  @keyframes move {
  0% {
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    opacity: 0;
  }
  100% {
    left: 50%;
    top: 50%;
    width: 960px;
    height: 510px;
    opacity: 1;
  }
}
@keyframes hide {
  0% {
    left: 50%;
    top: 50%;
    width: 960px;
    height: 510px;
    opacity: 1;
  }
  100% {
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    opacity: 0;
  }
}
.yxp-composition-box {
  width: 900px;
  height: 500px;
  .title-img {
    display: inline-block;
    width: 350px;
    height: 36px;
    margin: 36px auto 17px;
  }
  .yxp-composition-box-content {
      position: relative;
      width: 747px;
      margin: 18px auto 0;
      .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 232px;
      }
      .triangle {
        position: absolute;
        left: 50%;
        top: -18px;
        transform: translateX(-50%);
        width: 327px;
        height: 327px;
        margin: 0 auto;
        .total-text {
          position: absolute;
          right: 35px;
          top: 110px;
          color: #fff;
          font-size: 11px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 16px;
          z-index: 10;
        }
        .total-study-text {
          position: absolute;
          left: 36px;
          top: 110px;
          color: #fff;
          font-size:11px;
          font-family:Microsoft YaHei;
          font-weight:bold;
          line-height: 15px;
          z-index: 10;
        }
        &-img {
          position: absolute;
          left: 0;
          top: 0;
          width: 327px;
          height: 327px;
        }
        &-empty {
          z-index: 1;
        }
        &-solid {
          z-index: 3;
        }
        .first-study {
          left: 20px;
          text-align: center;
          width: 80px;
        }
        .study-r {
          // right: 35px;
          left: 230px;
          text-align: center;
          width: 80px;
        }
        .total-study {
          position: absolute;
          top: 92px;
          z-index: 10;
          p {
            line-height: 15px;
          }
          &-num {
            color: #fff;
            font-size:11px;
            font-family:Microsoft YaHei;
            font-weight:400;
            em {
              font-size: 24px;
              font-family: Klavika;
              font-weight: 500;
              margin-right: 4px;
            }
          }
        }
      }
      .circle {
        position: absolute;
        left: 50%;
        top: 53px;
        transform: translateX(-50%);
        width: 198px;
        height: 198px;
        z-index: 10;
        color: #000;
        cursor: pointer;
        &-index {
          width: 100%;
          height: 100%;
        }
        &-text {
          position: absolute;
          left: 79px;
          top: 59px;
          width: 40px;
          height: 44px;
        }
        &-model {
          position: absolute;
          left: 50%;
          bottom: 66px;
          transform: translateX(-50%);
          font-size: 15px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #FFFFFF;
        }
      }
  }
}
.last-study {
  bottom: 37px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 24px;
}
.yxp-scene-screen {
  width: 960px;
  height:700px;
  .close {
    right:0;
    top: -30px;
  }

}
.yxp-composition-top {
  height: 60px;
  line-height: 60px;
  .back {
    left: 40px;
    top: 17px;
  }
  .yxp-top-r {
    height: 60px;
  }
}
  .yxp-scene-main {
    height: calc(100% - 142px);
    .train-text {
      top:10px;
    }
    .main-box {
      height: calc(100% - 10px);
      margin: 10px auto 0;
      &-item {
        // height: 600px;
      }
      &-content {
        width: 470px;
        height: 458px;
        &:first-child {
          margin-right: 9px;
        }
        .content {
          &-user {
            &-item {
              margin-right: 2px;
              &:last-child {
                margin-right: 0;
              }
            }
          }
          .upload-box {
            padding: 20px !important;
          }
          .detail-box {
            padding: 12px 20px 20px !important;
          }
        }
      }
    }
  }
  .scene {
    height: 72px;
    line-height: 72px;
    img {
      width: 30px;
      height: 30px;
      margin-left: 20px;
    }
  }
  .scene-bottom {
    img {
      width: 40px;
      height: 40px;
    }
    .page {
      top: -4px;
    }
  }
}
@media screen and (min-width: 1200px) and (max-width: 1620px) {
  @keyframes move {
  0% {
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    opacity: 0;
  }
  100% {
    left: 50%;
    top: 50%;
    width: 1400px;
    height: 700px;
    opacity: 1;
  }
}
@keyframes hide {
  0% {
    left: 50%;
    top: 50%;
    width: 1400px;
    height: 700px;
    opacity: 1;
  }
  100% {
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    opacity: 0;
  }
}
.yxp-composition-box {
  width: 1150px;
  height: 650px;
  .title-img {
    display: inline-block;
    width: 510px;
    height: 53px;
    margin: 49px auto 16px;
  }
  .yxp-composition-box-content {
      position: relative;
      width: 926px;
      margin: 37px auto 0;
      .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 288px;
      }
      .triangle {
        position: absolute;
        left: 50%;
        top: -19px;
        transform: translateX(-50%);
        width: 400px;
        height: 400px;
        .total-text {
          position: absolute;
          right: 49px;
          top: 134px;
          color: #fff;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 15px;
          z-index: 10;
        }
        .total-study-text {
          position: absolute;
          left: 50px;
          top: 134px;
          color: #fff;
          font-size:12px;
          font-family:Microsoft YaHei;
          font-weight:bold;
          line-height: 16px;
          z-index: 10;
        }
        &-img {
          position: absolute;
          left: 0;
          top: 0;
          width: 400px;
          height: 400px;
        }
        &-empty {
          z-index: 1;
        }
        &-solid {
          z-index: 3;
        }
        .first-study {
          left: 23px;
          text-align: center;
          width:100px;
        }
        .study-r {
          // right: 49px;
          left: 276px;
          text-align: center;
          width:100px;
        }
        .total-study {
          position: absolute;
          top: 114px;
          z-index: 10;
          p {
            line-height: 16px;
          }
          &-num {
            color: #fff;
            font-size:12px;
            font-family:Microsoft YaHei;
            font-weight:400;
            em {
              font-size: 28px;
              font-family: Klavika;
              font-weight: 500;
              margin-right: 4px;
            }
          }
        }
      }
      .circle {
        position: absolute;
        left: 50%;
        top: 75px;
        transform: translateX(-50%);
        width: 230px;
        height: 230px;
        z-index: 10;
        color: #000;
        cursor: pointer;
        &-index {
          width: 100%;
          height: 100%;
        }
        &-text {
          position: absolute;
          left: 91px;
          top: 67px;
          width: 48px;
          height: 53px;
        }
        &-model {
          position: absolute;
          left: 50%;
          bottom: 73px;
          transform: translateX(-50%);
          font-size:20px;
          font-family:Microsoft YaHei;
          font-weight:bold;
          color: #fff;
          line-height: 26px;
        }
      }
}
}
.last-study {
  bottom: 38px;
  font-size: 20px;
}
.yxp-scene-screen {
  width: 1120px;
  height:700px;
  .close {
    right: 0;
    top: -30px;
  }
}
.yxp-composition-top {
  height: 80px;
  line-height: 80px;
  .back {
    left: 40px;
    top: 27px;
  }
  .yxp-top-r {
    height: 80px;
  }
}
  .yxp-scene-main {
    height: calc(100% - 160px);
    .train-text {
      top: 20px;
    }
    .main-box {
      height: calc(100% - 20px);
      margin: 20px auto 0;
      &-item {
        // height: 650px;
      }
      &-content {
        width: 570px;
        height: 608px;
        &:first-child {
          margin-right: 20px;
        }
        .content {
          &-user {
            &-item {
              margin-right:10px;
              &:last-child {
                margin-right: 0;
              }
            }
          }
          // .content-wrap {
          //   padding: 0 !important;
          // }
          .upload-box {
            padding: 30px !important;
          }
          .detail-box {
            padding: 12px 30px 30px !important;
          }
        }
      }
    }
  }
  .scene {
    height: 80px;
    line-height: 80px;
    img {
      width: 40px;
      height: 40px;
      margin-left: 20px;
    }
  }
  .scene-bottom {
    img {
      width: 40px;
      height: 40px;
    }
    .page {
      top: -5px;
    }
  }
  // .yxp-composition-main {
  //   padding-left: 40px;
  //   padding-right: 40px;
  //   .composition-list {
  //     width: 100%;
  //     &-item {
  //       width: calc((100% - 40px) / 2);
  //       // &:nth-child(2n + 1) {
  //       //   margin-right: 40px;
  //       // }
  //       .title {
  //         &-l {
  //           margin-right: 10px;
  //           .unit {
  //             margin-right: 26px;
  //           }
  //           .unit-main {
  //             &-name {
  //               &:first-child {
  //                 margin-right: 2px;
  //               }
  //             }
  //           }
  //         }
  //       }
  //     }
  //   }
  // }
}
@media screen and (min-width: 1620px) {
  @keyframes move {
  0% {
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    opacity: 0;
  }
  100% {
    left: 50%;
    top: 50%;
    width: 1400px;
    height: 700px;
    opacity: 1;
  }
}
@keyframes hide {
  0% {
    left: 50%;
    top: 50%;
    width: 1400px;
    height: 700px;
    opacity: 1;
  }
  100% {
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    opacity: 0;
  }
}
.yxp-composition-box {
  width: 1300px;
  height: 750px;
  .title-img {
    display: inline-block;
    width: 510px;
    height: 53px;
    margin: 72px auto 17px;
  }
  .yxp-composition-box-content {
      position: relative;
      width: 1030px;
      margin: 45px auto 0;
      .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 320px;
      }
      .triangle {
        position: absolute;
        left: 50%;
        top: -7px;
        transform: translateX(-50%);
        width: 400px;
        height: 400px;
        margin: 0 auto;
        .total-text {
          position: absolute;
          right: 49px;
          top: 137px;
          color: #fff;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 16px;
          z-index: 10;
        }
        .total-study-text {
          position: absolute;
          left: 50px;
          top: 137px;
          color: #fff;
          font-size:12px;
          font-family:Microsoft YaHei;
          font-weight:bold;
          line-height: 16px;
          z-index: 10;
        }
        &-img {
          position: absolute;
          left: 0;
          top: 0;
          width: 400px;
          height: 400px;
        }
        &-empty {
          z-index: 1;
        }
        &-solid {
          z-index: 3;
        }
        .first-study {
          left: 21px;
          text-align: center;
          width:100px;
        }
        .study-r {
          left: 276px;
          text-align: center;
          width: 100px;
        }
        .total-study {
          position: absolute;
          top: 118px;
          z-index: 10;
          p {
            line-height: 16px;
          }
          &-num {
            color: #fff;
            font-size:12px;
            font-family:Microsoft YaHei;
            font-weight:400;
            em {
              font-size: 28px;
              font-family: Klavika;
              font-weight: 500;
              margin-right: 5px;
              // line-height: 10px;
            }
          }
        }
      }
      .circle {
        position: absolute;
        left: 50%;
        top: 83px;
        transform: translateX(-50%);
        width: 230px;
        height: 230px;
        z-index: 10;
        color: #000;
        cursor: pointer;
        &-index {
          width: 100%;
          height: 100%;
        }
        &-text {
          position: absolute;
          left: 91px;
          top: 67px;
          width: 48px;
          height: 53px;
        }
        &-model {
          position: absolute;
          left: 50%;
          bottom: 73px;
          transform: translateX(-50%);
          font-size:20px;
          font-family:Microsoft YaHei;
          font-weight:bold;
          color: #fff;
          line-height: 26px;
        }
      }
}
}
.last-study {
  bottom: 95px;
  font-size: 20px;
}
.yxp-scene-screen {
  width: 1400px;
  height:700px;
  .close {
    right: 0;
    top: -30px;
  }
}
.yxp-composition-top {
  height: 80px;
  line-height: 80px;
  .back {
    left: 40px;
    top: 27px;
  }
  .yxp-top-r {
    height: 80px;
  }
}
  .yxp-scene-main {
    height: calc(100% - 180px);
    .train-text {
      top: 30px;
    }
    .main-box {
      height: calc(100% - 30px);
      margin: 30px auto 0;
      &-item {
        // height: 650px;
      }
      &-content {
        width: 700px;
        height: 608px;
        // &:last-child {
        //   &::after {
        //     position: absolute;
        //     left: -20px;
        //     top: 30px;
        //     display: block;
        //     content: '';
        //     width: 0;
        //     height: 0;
        //     border-top: 10px solid transparent;
        //     border-right: 10px solid #fff;
        //     border-bottom: 10px solid transparent;
        //     border-left: 10px solid transparent;
        //   }
        // }
        &:first-child {
          margin-right: 40px;
        }
        .content {
          &-user {
            &-item {
              margin-right:40px;
              &:last-child {
                margin-right: 0;
              }
            }
          }
          .upload-box {
            padding: 30px !important;
          }
          .detail-box {
            padding: 12px 30px 30px !important;
          }
        }
      }
    }
  }
  .scene {
    height: 100px;
    line-height: 100px;
    img {
      width: 40px;
      height: 40px;
      margin-left: 20px;
    }
  }
  .scene-bottom {
    img {
      width: 40px;
      height: 40px;
    }
    .page {
      top: 0;
    }
  }
  // .yxp-composition-main {
  //   .composition-list {
  //     width: 1540px;
  //     &-item {
  //       width: 750px;
  //       &:nth-child(2n + 1) {
  //         margin-right: 40px;
  //       }
  //       .title {
  //         &-l {
  //           .unit {
  //             margin-right: 46px;
  //           }
  //           .unit-main {
  //             &-name {
  //               &:first-child {
  //                 margin-right: 25px;
  //               }
  //             }
  //           }
  //         }
  //       }
  //     }
  //   }
  // }
}
.yxp-scene-main {
  position: relative;
  width: 100%;
  // height: 100%;
  // padding-top: 110px;
  .main-box {
    position: relative;
    display: flex;
    justify-content: center;
    width: inherit;
    .work-title {
            font-size:30px;
            font-family:Microsoft YaHei;
            font-weight:bold;
            color: #333333;
            text-align: center;
            padding-top:50px;
          }
          .work-info {
            font-size:20px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color: #333;
            padding-top: 20px;
          }
    &-item {
      position: relative;
      width: 800px;
      height: 100%;
      background: #fff;
      border-radius: 10px;
      // overflow: hidden;
      .content {
        height:inherit;
        padding: 18px 10px 12px 0;
  //       /*滚动条样式*/
  //       &::-webkit-scrollbar {
  //       width: 6px;
  //       height: 2px;
  //       background-color: rgba(240, 240, 240, 1);
  //     }
  //     &::-webkit-scrollbar-thumb {
  //        box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  // border-radius: 10px;
  // background-color: rgba(240, 240, 240, .5);
  //     }
  //     &::-webkit-scrollbar-track {/*滚动条里面轨道*/
  //       border-radius: 10px;
  // box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  // background-color: rgba(240, 240, 240, .5);
  //   }
        &-wrap {
          height: 100%;
          text-align: left;
          padding: 0 60px 60px 80px;
          overflow-y: auto;
          overflow-x: hidden;
        }
      }
    }
&-content {
        position: relative;
        height: 100%;
        // width: 700px;
        // height: 750px;
        background: #fff;
        border-radius: 10px;
        // &:last-child {
        //   &::after {
        //     position: absolute;
        //     left: -20px;
        //     top: 30px;
        //     display: block;
        //     content: '';
        //     width: 0;
        //     height: 0;
        //     border-top: 10px solid transparent;
        //     border-right: 10px solid #fff;
        //     border-bottom: 10px solid transparent;
        //     border-left: 10px solid transparent;
        //   }
        // }
        .content {
          position: relative;
          height: inherit;
          text-align: left;
          padding: 18px 10px 12px 0;
          &-wrap {
            height: 100%;
            padding: 30px;
            overflow-y: auto;
            overflow-x: hidden;
          }

        }
      }
  }
}
.yxp-course {
  display: flex;
  flex-direction: column;
  width: 100%;
  // height: 100vh;
  // min-height:600px;
  overflow: hidden;
}
.yxp-composition-box {
  min-height: 500px;
}
.yxp-composition-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    text-align: center;
    background: #fff;
    padding: 0 40px;
  .back {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 30px;
    height: 27px;
    span {
      display: block;
      width: 30px;
      height: 27px;
      background: url(../../assets/word/back-icon.png) no-repeat;
      background-size: 100%;
     cursor: pointer;
    }
  }
  .yxp-top-c {
    width: 100%;
    font-size: 20px;
    flex: 1;
    font-weight: 700;
  }
  .yxp-top-r {
    position: absolute;
    right: 40px;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
  .yxp-scene-screen {
    position: fixed;
    left: -1000px;
    top: 0;

    transform: translate(-50%,-50%);
    text-align: left;
    background: #fff;
    opacity: 0;
    border-radius: 10px;
    z-index: 1000;
    .screen-box {
      display: flex;
      justify-content: space-between;
      height: 100%;
      overflow: hidden;
    }
    .close {
      position: absolute;
      width:20px;
      height: 20px;
      background: url(../../assets/word/close-icon.png) no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
      &:hover {
        background-image: url(../../assets/word/close-hover.png);
      }
    }
    &-item {
      flex: 1;
      padding: 18px 10px 12px 38px;
      overflow: hidden;
      .yxp-screen-box {
        height: 100%;
        padding-right: 20px;
        padding-top: 12px;
        overflow: auto;
      }
      .on {
        color: #fff;
        background: #27BFA3;
      }
      span {
        line-height: 28px;
        font-size: 20px;
        cursor: pointer;
      }
      &:last-child {
        position: relative;
        &::after {
          display: block;
          content: '';
          position: absolute;
          left:0;
          top: 30px;
          width: 1px;
          height: calc(100% - 60px);
          background: #E2E2E2;
        }
      }
    }
  }
  .yxp-composition-main {
  position: relative;
  height: 100%;
  overflow: auto;
  padding-top: 30px;
  // padding-top: 110px;
  .composition-list {
    display: flex;
    justify-content: space-between;
    // align-items: flex-start;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 auto;
  }
  }
  .scene {
    display: flex;
    width: 100%;
    .scene-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width:800px;
      margin: 0 auto;

      &-item {
        display: flex;
        align-items: center;
        cursor: pointer;
        span {
          color: #27BFA3;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
        }
        .ms {
          font-size:16px;
          font-family:Microsoft YaHei;
          font-weight:400;
          color: #27BFA3;

        }
        .voice-range {
          width: 180px;
          margin: 0 10px;
        }
      }
      .model {
        color: #27BFA3;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        // margin-right: 20px;
      }
    }
  }

.ant-tooltip, .ant-slider-tooltip, .ant-tooltip-placement-bottom {
  display: none !important;
}
</style>
